<template>
  <view class="regularList">
    <nav-bar title="巡查任务" leftArrow></nav-bar>
    <van-sticky :offset-top="46">
      <van-tabs v-model:active="active" @click="onTab">
        <van-tab v-for="tab in tabList" :title="tab.title" :name="tab.value"></van-tab>
      </van-tabs>
    </van-sticky>
    <van-pull-refresh class="van-pull-refresh-page-with-nav-tab" v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="list.length ? '没有更多了' : ''"
        @load="onLoad"
        class="universal-list"
      >
        <template v-if="list.length > 0">
          <van-cell v-for="item in list" :key="item">
            <view class="universal-list-item" @click="goLink(item)">
              <view class="universal-list-head">
                <view class="universal-list-title">{{ item.lineType.label }}</view>
               <view class="universal-list-status">
                  <van-tag :type="item.handlerStatus === '3' ? 'primary' : 'warning'">{{ item.handlerStatusName }}</van-tag>
                </view>
              </view>
              <view class="universal-list-main">
                <view class="universal-list-detail">
                  <view class="universal-list-detail-title">年份：</view>
                  <view class="universal-list-detail-cont">{{ item.year }}</view>
                </view>
                <view class="universal-list-detail">
                  <view class="universal-list-detail-title">下达人：</view>
                  <view class="universal-list-detail-cont">{{ item.assignerName }}</view>
                </view>
                <view class="universal-list-detail">
                  <view class="universal-list-detail-title">处理人：</view>
                  <view class="universal-list-detail-cont">{{ item.responsibleName }}</view>
                </view>
                <view class="universal-list-detail w-full">
                  <view class="universal-list-detail-title">检查说明：</view>
                  <van-text-ellipsis class="universal-list-detail-cont" :content="item.checkDesc" />
                </view>
                <view class="universal-list-detail w-full">
                  <view class="universal-list-detail-title">下达时间：</view>
                  <view class="universal-list-detail-cont">{{ item.assignmentTime }}</view>
                </view>
                <!-- <view class="universal-list-detail">
                  <view class="universal-list-detail-title">开始时间：</view>
                  <view class="universal-list-detail-cont">{{ item.startTime }}</view>
                </view> -->
                <view class="universal-list-detail w-full">
                  <view class="universal-list-detail-title">结束时间：</view>
                  <view class="universal-list-detail-cont">{{ item.endTime }}</view>
                </view>
              </view>
              <view class="universal-list-footer">
					<view v-if="item.handlerStatus === '3'" class="universal-list-footer-button">
						详情<van-icon name="arrow" />
					</view>
					<view v-else class="universal-list-footer-button universal-list-footer-button-warning">
						处理<van-icon name="arrow" />
					</view>
				</view>
            </view>
          </van-cell>
        </template>
        <van-empty v-if="!list.length && !loading" description="暂无数据" />
      </van-list>
    </van-pull-refresh>
  </view>
</template>

<script setup>
  import dayjs from 'dayjs';
  import { ref } from 'vue';
  import { apiPatrolRegularTaskList } from '@/api/patrolInspect';
  
  import store from '@/store'
  
  const userInfo = store.getters.GET_USER_INFO.sysUser;
  const currentUserId = ref(Number(userInfo.userId) || '');

  let active = ref('')
  
  const tabList = [
    {
      title: '全部',
      value: '',
    },
    {
      title: '待处理',
      value: 0,
    },
    {
      title: '已完成',
      value: 1,
    },
  ];
  let list = ref([]);
  let loading = ref(false);
  let finished = ref(false);
  let refreshing = ref(false);
  let pages = ref({
    pageNum: 1,
    pageSize: 10,
  })
  let totalPages = {
  };

  const goLink = (option) => {
    uni.navigateTo({ url: `/pages/patrolInspect/regular-created?taskId=${option.lineTaskId}&id=${option.lineId || ''}` })
  }
  const onTab = () => {
    list.value = [];
    pages.value = {
      pageNum: 1,
      pageSize: 10,
    };
    getList();
  };
  const onLoad = () => {
    getList(active.value);
  };
  const onRefresh = () => {
    // 清空列表数据
    // finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    //loading.value = true;
    pages.value.pageNum = 1;
    onLoad();

  };

  const getList = () => {
    loading.value = false;
    finished.value = true; // 数据请求中的时候停止再次请求数据
    apiPatrolRegularTaskList({
      ...pages.value,
      status: active.value
    }).then(res => {
      setList(res)
    })
  };
  const setList = (res) => {
    // 如果是第一页,列表数据清空
    if (res.current === '1') {
      list.value = [];
    };
    // 列表赋值
    list.value = [...list.value, ...res.data];
    // 保存总页码
    totalPages = {
      pageSize: res.pageSize,
      pages: res.pages,
      total: res.total,
    }
    if (pages.value.pageNum < totalPages.pages) {
      pages.value.pageNum += 1;
    }
    // 数据获取完毕，下拉刷新状态更新
    refreshing.value = false;
    // 数据全部加载完成
    if (list.value.length >= totalPages.total) {
      finished.value = true;
    } else {
      // 如果数据还有未加载部分
      finished.value = false;
    }
  };
</script>

<style lang="scss" scoped>
@import "@/assets/universal-list.scss";
.dailyList .universal-list-detail {
  min-width: 40%;
}
</style>